// add customs styles and general overrides here
// due to the cascading nature of css, if you try to override theme css variables in this file, those changes will not apply. Instead, override css variables in the `override.sass` file
// we recommend not editing this file directly. Instead, create an `assets/sass/_custom.sass` file at the root level of your site.
// if you edit this file directly, you will have to resolve git conflicts when and if you decide to pull changes we make on the theme
html.home
  body
    width: 100%
    height: 100%
    background-color: #211717
    background-image: url("#{$imagesPath}bg_min.jpg")
    background-repeat: no-repeat
    background-size: cover
    .footer
      background: none
      text-align: center
.home
  &_wrap
    width: 40rem
    min-height: 20rem
    max-width: 90%
    max-height: 80%
    position: fixed
    left: 50%
    top: 50%
    margin-left: -20rem
    margin-top: -12rem
    background-color: rgba(0, 0, 0, 0.3)
    border-radius: 1.5em
    padding: 1rem
    color: #fff
    .title
      text-align: center
      border-bottom: 1px solid #979797
      font-size: 1.5rem
      line-height: 4rem
      padding-bottom: 1rem
      img
        height: 4rem
        border-radius: 50%
        margin-right: 1rem
      .sub
        font-size: 1rem
        line-height: 2rem
        opacity: .6
    .items
      line-height: 2.5rem
      padding: .5rem
      .item
        box-sizing: border-box
        display: inline-block
        width: 100%
        padding: 0 1rem
        border-radius: .5rem
        font-size: 1rem
        background-color: rgba(0,0,0,0.3)
        margin-bottom: .5rem
        &:before
          content: "»"
          margin-right: .5rem
        &:hover
          color: #000000
          background-color: #ffffff
    .foot
      text-align: center
      font-size: .8rem
      opacity: .6
.sidebar
  li,p
    font-size: 1rem
  .author_header
    display: grid
    grid-template-columns: 3rem 1fr
    grid-gap: 1rem
    img
      border-radius: 50%
.to_top
  width: 4rem
  height: 4rem
  display: flex
  justify-content: center
  align-items: center
  cursor: pointer
  border-radius: 50%
  position: fixed
  bottom: 1.5rem
  right: 1.5rem
  z-index: 99
  visibility: hidden
  opacity: 0
  transition: visibility 0.6s cubic-bezier(0.6, 0.04, 0.98, 0.335), opacity 0.6s cubic-bezier(0.6, 0.04, 0.98, 0.335), transform 0.6s cubic-bezier(0.6, 0.04, 0.98, 0.335)
  &.ios
    position: absolute
    bottom: 0.75rem
    right: 0
  svg
    fill: $theme
    width: 100%
    height: 100%
  &:hover
    opacity: 1
  &.launch
    opacity: 0
    transform: translateY(-50px)
    pointer-events: none
  &.show
    visibility: visible
    opacity: .8
code.noClass
  background-color: rgba($theme, 0.15)
  padding: .25rem .5rem
  border-radius: .5rem
  margin: 0 .25rem
.highlight
  display: grid
  width: 100%
  position: relative
  pre
    overflow-x: auto
    background: var(--code-bg) !important
    border-radius: 4px
    font-family: 'Monaco', monospace
    padding: 1.5rem .5rem .5rem .5rem
  .lang
    position: absolute
    top: .5rem
    left: .5rem
    font-style: italic
    text-transform: uppercase
    font-size: 67%
    opacity: .5
    color: var(--light)
  .copy
    position: absolute
    top: .5rem
    right: .5rem
    width: 1rem
    height: 1rem

.share-wechat
  position: relative
.wechat-qrcode
  border: 1px solid #eee
  position: absolute
  z-index: 9
  top: 2rem
  left: -5rem
  width: 12rem
  padding-bottom: 1rem
  color: #666
  font-size: .8rem
  text-align: center
  background-color: #fff
  box-shadow: 0 2px 10px #aaa
  transition: all 200ms
  border-radius: .5rem
  &:before
    content: ''
    position: absolute
    left: 50%
    margin-left: -.8rem
    top: -1.2rem
    width: 0
    height: 0
    border-width: .8rem .8rem .8rem .8rem
    border-style: solid
    border-color: transparent transparent #f3f3f3 transparent
  &.hide
    display: none
  h4
    font-weight: normal
    height: 2rem
    line-height: 2rem
    font-size: .8rem
    background-color: #f3f3f3
    margin: 0
    padding: 0
    color: #777
  .help
    font-weight: normal
    line-height: 1rem
    font-size: .8rem
    padding: 0
    margin: 0

[data-waline]
  img
    margin: 0
// 修改waline暗色评论样式
html[data-mode="dim"]
  [data-waline]
    p
      color: $light
    .wl-panel
      background: var(--post-bg)
      border-color: var(--post-bg)
      .wl-header
        border-color: var(--post-bg)
    .wl-editor,.wl-input
      color: $light
      &:focus
        background: var(--choice-bg)
    .wl-card
      border-color: var(--post-bg)
      .wl-meta>span
        background: var(--post-bg)

/* 缩放动画 */
@keyframes zoom
  from
    transform: scale(0) /* 初始缩放为0 */
    opacity: 0
  to
    transform: scale(1) /* 缩放到1倍 */
    opacity: 1
/* 模态框样式 */
#modalImage
  display: none /* 默认隐藏模态框 */
  position: fixed /* 固定定位，覆盖整个页面 */
  z-index: 999 /* 确保模态框显示在最上层 */
  left: 0
  top: 0
  width: 100%
  height: 100%
  overflow: auto /* 当内容溢出时显示滚动条 */
  background-color: rgba(0, 0, 0, 0.8) /* 半透明背景 */
  .content
    margin: 0 auto
    padding: 0
    width: 80% /* 图片的宽度 */
    max-width: 1200px /* 最大宽度限制 */
    height: 100vh
    line-height: 100vh
    text-align: center
    animation-name: zoom
    animation-duration: 0.6s
    .image
      margin: 0
      padding: 0
      width: auto
      height: auto
      max-width: 100%
      max-height: 100%
  .close
    position: absolute /* 绝对定位 */
    top: 20px
    right: 20px
    color: #f1f1f1 /* 按钮颜色 */
    line-height: 40px
    font-size: 40px /* 字体大小 */
    font-weight: bold /* 字体加粗 */
    cursor: pointer /* 鼠标悬浮时显示指针 */
    &:hover
      color: #bbb /* 更改悬浮时的颜色 */